<template>
  <div class="default-table-detail-container">
    <BaseTableInfo v-model="baseTableInfoModel" />
  </div>
</template>

<script lang="tsx" setup>
import DrillInfoMaterialRecordDetailApi from "~/src/api/DrillInfoMaterialRecordDetailApi";
import DrillInfoMaterialRecordApi from "/@/api/DrillInfoMaterialRecordApi.ts";

const props = defineProps({
  modelValue: {},
});
const route = useRouter();

const baseTableInfoModel = ref({
  columnCount: 3,
  autoFit: false,
  columnWidth: "300px",
  labelWidth: "100px",
  title: "基本信息",
  modelData: {},
  itemList: [
    {
      title: "",
      items: [
        //渲染样式区域  通过key ===model 中的值
        // {
        //   label: "id",
        //   field: "id",
        // },
        // {
        //   label: "资料id",
        //   field: "materialId",
        // },
        // {
        //   label: "报名记录",
        //   field: "drillName",
        // },
        // {
        //   label: "活动id",
        //   field: "drillId",
        // },
        // {
        //   label: "用户id",
        //   field: "userKey",
        // },
        // {
        //   label: "手机号",
        //   field: "phone",
        // },
        // {
        //   label: "公司ID",
        //   field: "companyId",
        // },
        // {
        //   label: "员工id",
        //   field: "staffId",
        // },
        {
          label: "姓名",
          field: "staffName",
        },
        {
          label: "身份证",
          field: "staffIdentity",
        },
        {
          label: "开始时间",
          field: "startTime",
        },
        {
          label: "结束时间",
          field: "endTime",
        },
        // {
        //   label: "上次学习时间",
        //   field: "latestLearningTime",
        // },
        // {
        //   label: "上次学习detail_id",
        //   field: "latestDetailId",
        // },
        {
          label: "持续时间s",
          field: "duration",
        },
        // {
        //   label: "资料url",
        //   field: "materialUrl",
        // },
        // {
        //   label: "创建人",
        //   field: "creator",
        // },
        // {
        //   label: "修改人",
        //   field: "reviser",
        // },
        // {
        //   label: "排序",
        //   field: "sort",
        // },
        {
          label: "创建时间",
          field: "create_time",
        },
        {
          label: "更新时间",
          field: "update_time",
        },
        {
          isTitle: true
        }
      ],
    },
  ],
  buttons: [
    //标题操作区域
    // {
    //   name: "更多",
    //  buttonClass: 'danger',
    // width: 100,
    // click: (any: object) => {   //暴露的方法钩子
    // $baseMessage("这里执行业务", 'success', 'vab-hey-message-success');
    //},
    //},
  ],
  tableModel: {
    border: true,
    pagination: true,
    inline: true,
    selectable: true,
    isFullscreen: false,
    showToolbar: false,
    minWidth: "200px",
    descriptionTitle: "学习记录详情",
    data: {
      //table  初始化
      current: 1,
      size: 10,
      total: 100,
      data: [],
    },
    requestData: { api: DrillInfoMaterialRecordDetailApi.getPageData, query: { drillInfoMaterialRecordId: props.modelValue.query.drillInfoMaterialRecordId } }, //数据源 参数有效性： 'steady|transient'
    columns: [
      // {
      //   label: "id",
      //   field: "id",
      //   width: 100,
      // },
      // {
      //   label: "学习记录id",
      //   field: "recordId",
      //   width: 120,
      // },
      // {
      //   label: "资料id",
      //   field: "materialId",
      //   width: 120,
      // },
      {
        label: "资料名称",
        field: "materialName",
        width: 180,
      },
      {
        label: "描述",
        field: "description",
        width: 180,
      },
      {
        label: "资料类型",
        field: "materialTypeName",
        width: 180,
      },
      // {
      //   label: "报名记录",
      //   field: "entryId",
      //   width: 150,
      // },
      {
        label: "活动名称",
        field: "drillName",
        width: 150,
      },
      // {
      //   label: "用户id",
      //   field: "userKey",
      //   width: 180,
      // },
      {
        label: "手机号",
        field: "phone",
        width: 180,
      },
      // {
      //   label: "公司ID",
      //   field: "companyId",
      //   width: 150,
      // },
      // {
      //   label: "员工id",
      //   field: "staffId",
      //   width: 150,
      // },
      {
        label: "姓名",
        field: "staffName",
        width: 180,
      },
      // {
      //   label: "身份证",
      //   field: "staffIdentity",
      //   width: 180,
      // },
      {
        label: "开始时间",
        field: "startTime",
        width: 200,
      },
      {
        label: "结束时间",
        field: "endTime",
        width: 200,
      },
      {
        label: "持续时间s",
        field: "duration",
        width: 150,
      },
      {
        label: "资料",
        field: "materialUrl",
        // fieldFormat: "download",
        render({ row }) {
          return <el-button onClick={() => DrillInfoMaterialRecordApi.downloadAttachment(row["materialUrl"])}>下载</el-button>
        },
        width: 180,
      },
      // {
      //   label: "学习总结",
      //   field: "summary",
      //   width: 180,
      // },
      // {
      //   label: "创建人",
      //   field: "creator",
      //   width: 180,
      // },
      // {
      //   label: "修改人",
      //   field: "reviser",
      //   width: 180,
      // },
      // {
      //   label: "排序",
      //   field: "sort",
      //   width: 120,
      // },
      {
        label: "创建时间",
        field: "create_time",
        width: 200,
      },
      {
        label: "更新时间",
        field: "update_time",
        width: 200,
      },
    ],
  }
});

onMounted(async () => {
  //初始化数据model
  const { data } = await DrillInfoMaterialRecordApi.getDetail({
    drillInfoMaterialRecordId: props.modelValue.query.drillInfoMaterialRecordId, //从路由中获取参数
  });
  baseTableInfoModel.value.modelData = data;
});
</script>

<style lang="scss" scoped>
.default-table-detail-container {
  :deep() {
    .el-form--inline {
      .el-form-item {
        margin-right: 10px;
      }
    }

    .el-descriptions__label {
      min-width: 80px !important;
      text-align: right;
    }
  }
}
</style>
